<template>
  <div class="bg">
    <div class="header">
      <img src="../img/head.svg">
      <div class="box">
        <div class="title" style="cursor: pointer;" @click="goHome">数智化控制中心</div>
      </div>
    </div>

    <div class="dp_con">
      <div class="left">
        <div class="card height_50" style="height: calc(35% - 0.625vw)">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span>设备利用率</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="sblyl zw" ref="sblylChar"></div>
          </div>
        </div>
        <div class="card height_50" style="height: calc(65% - 0.625vw)">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span>设备综合效率</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="sbjx">
              <div class="item v2">
                <div id="main1" ref="zhxl1Day"></div>
                <p>近1日(OEE)</p>
              </div>
              <div class="item v2">
                <div id="main2" ref="zhxl1Month"></div>
                <p>近1月(OEE)</p>
              </div>
              <div class="item v2">
                <div id="main3" ref="zhxl1Year"></div>
                <p>近1年(OEE)</p>
              </div>
            </div>
            <div class="sbxj_tb zw" ref="sbzhxlChar"></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="xnzb_c">
          <div class="r1">
            <div class="item">
              <div class="line"></div>
              <div class="box">
                <div class="flex-0">
                  <img src="../img/icon5.svg">
                </div>
                <div class="w-100">
                  <p class="text1">开机时间</p>
                  <p class="text2">近12个月</p>
                </div>
                <div class="flex-0 text3">{{runTime}}天</div>
              </div>
              <div class="line"></div>
            </div>
            <div class="item">
              <div class="line"></div>
              <div class="box v2">
                <div class="flex-0">
                  <img src="../img/icon6.svg">
                </div>
                <div class="w-100">
                  <p class="text1">停机时间</p>
                  <p class="text2">近12个月</p>
                </div>
                <div class="flex-0 text3">{{stopTime}}小时</div>
              </div>
              <div class="line"></div>
            </div>
          </div>
          <div class="r2">

            <div class="item">
              <div class="text1">{{xnLYL}}%</div>
              <div class="text2">性能利用率</div>
            </div>
            <div class="item">
              <div class="text1">{{sbOEE}}%</div>
              <div class="text2">设备OEE</div>
            </div>
            <div class="item">
              <div class="text1">{{sbKDL}}%</div>
              <div class="text2">设备开动率</div>
            </div>
            <div class="item">
              <div class="text1">{{100-sbKDL}}%</div>
              <div class="text2">停机率</div>
            </div>
            <img class="bg2" src="../img/p4.svg">
          </div>
        </div>
      </div>
      <div class="right">
        <div class="card height_3">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span>月故障停机时间</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="zw" style="height: 100%" ref="gztjsjChar"></div>
          </div>
        </div>

        <div class="card height_3">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span>月检修停机时间</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="zw" style="height: 100%" ref="jxtjsjChar"></div>
          </div>
        </div>
        <div class="card height_3">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span>故障停机统计</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
<!--            <div class="zw" style="height: 100%" ref="gztjlChar"></div>-->

            <div class="sbjx">
              <div class="item v2">
                <div id="main1" ref="mttrChar" style="margin-top: 3vh"></div>
                <p>平均修复时间(MTTR)</p>
              </div>
              <div class="item v2">
                <div id="main2" ref="mtbfChar" style="margin-top: 3vh"></div>
                <p>平均故障间隔时间(MTBF)</p>
              </div>
              <div class="item v2">
                <div id="main3" ref="gztjlChar" style="margin-top: 3vh"></div>
                <p>故障停机率</p>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="../img/footer.svg">
    </div>
  </div>
</template>

<script>
import {initTheme} from '@/components/SettingDrawer/settingConfig'
import defaultSettings from '@/config/defaultSettings'
import {SysMixin} from '@/mixins/SysMixin'

import Big from 'big.js'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { formatDateTime, getDaysAgo, getMonthAgo, formatDate, getDecimalPlaces } from '@/views/kzzx/utils/util'
import { dpm_oee, dpm_oee_trend, dpm_runStopDuration, dpm_mtbf, duration_groupByMonth } from '@/views/kzzx/utils/api'
import constant from '@/views/kzzx/utils/constant'

export default {
  name: 'xnzb',
  components: {},
  mixins:[SysMixin],
  beforeCreate () {

  },

  beforeDestroy () {

    if(this.timmer){
      console.log("清除定时器")
      clearTimeout(this.timmer)
    }
  },

  data () {
    return {
      visible:false,
      //设备利用率
      sblylChar:null,

      //设备综合效率近1日OEE
      zhxl1Day:null,

      //设备综合效率近1月OEE
      zhxl1Month:null,

      //设备综合效率近1年OEE
      zhxl1Year:null,

      //设备综合效率
      sbzhxlChar:null,

      //平均修复时间
      mttrChar:null,

      //平均故障间隔时间
      mtbfChar:null,

      //故障停机率
      gztjlChar:null,

      //故障停机时间
      gztjsjChar:null,

      //检修停机时间
      jxtjsjChar:null,

      oee_1day:0,
      oee_1month:0,
      oee_1year:0,
      //开机时间
      runTime:0,
      //停机时间
      stopTime:0,

      //性能利用率
      xnLYL:0,

      //设备OEE
      sbOEE:0,

      //设备开动率
      sbKDL:0,

      //故障停机率
      sbGZTJL:0,

      //时间利用率
      sjLYL:0,

      //平均故障恢复时间，单位：小时
      MTTR:0,

      //平均故障间隔（平均无故障周期），单位：天
      MTBF:0,


      //定时器
      timmer:null,

      //间隔
      interval:1000*60*10

    }
  },
  // 监听属性
  computed: {

  },
  created () {},
  mounted () {
    document.title = "设备绩效"
    let that = this
    this.initTheme()
    that.$nextTick(() => {
      that.initChar()
      that.query()
    })
  },
  destroy () {

  },
  methods: {
    showModal() {
      this.visible = true;
    },
    initTheme(){
      let theme = localStorage.getItem(defaultSettings.localStorageThemeKey)
      initTheme(theme || defaultSettings.primaryTheme)
    },
    handleOk(e) {

      this.visible = false;

    },
    handleCancel(e) {
      this.visible = false;
    },

    initChar () {
      this.zhxl1Day = echarts.init(this.$refs.zhxl1Day)
      this.zhxl1Month = echarts.init(this.$refs.zhxl1Month)
      this.zhxl1Year = echarts.init(this.$refs.zhxl1Year)
      this.sblylChar = echarts.init(this.$refs.sblylChar)
      this.sbzhxlChar = echarts.init(this.$refs.sbzhxlChar)
      this.mttrChar = echarts.init(this.$refs.mttrChar)
      this.mtbfChar = echarts.init(this.$refs.mtbfChar)
      this.gztjlChar = echarts.init(this.$refs.gztjlChar)
      this.gztjsjChar = echarts.init(this.$refs.gztjsjChar)
      this.jxtjsjChar = echarts.init(this.$refs.jxtjsjChar)
    },

    query(){
      this.querySblylData()
      this.queryOee1Day()
      this.queryOee1Month()
      this.queryOee1Year()

      //设备综合效率，OEE趋势
      this.queryOeeTrend()

      this.querydpmMtbf()

      //停机时间月分析，现在做的是故障停机时间和检修停机时间
      this.durationGroupByMonth()


      if(this.timmer){
        clearTimeout(this.timmer)
      }
      this.timmer = setTimeout(() => {
        this.query()
      }, this.interval)

    },

    /**
     * 设备利用率
     */
    querySblylData(){
      let m = getMonthAgo(11)
      dpm_oee_trend(m+"-01",formatDate(new Date())).then(res=>{
        console.log("接口：/api/dpm/oee/trend","方法：querySblylData",res)
        if(constant.successCode===res.code){
          let source = res.data.source
          let xAxisData=[]
          let fhsjlyl=[] //负荷时间利用率
          let sjlyl=[] //时间利用率
          let xnlyl=[] //性能利用率
          for(const item of source){
            xAxisData.push(item[0])
            if(getDecimalPlaces(item[1])>2){
              item[1] = Big(item[1]).toFixed(2).toString()
            }
            if(getDecimalPlaces(item[2])>2){
              item[2] = Big(item[2]).toFixed(2).toString()
            }
            if(getDecimalPlaces(item[3])>2){
              item[3] = Big(item[3]).toFixed(2).toString()
            }
            sjlyl.push(item[1])
            xnlyl.push(item[3])
            fhsjlyl.push(item[2])
          }
          this.setSblylChar(xAxisData,sjlyl,xnlyl,fhsjlyl)
        }
      })
    },
    /**
     * 设备绩效，近1日的OEE
     */
    queryOee1Day(){
      let day = getDaysAgo(1)
      dpm_oee(day,formatDate(new Date())).then(res=>{
        console.log("接口：/api/dpm/oee","方法：queryOee1Day",res)
        if(constant.successCode===res.code){
          if(res.data.OEE){
            this.oee_1day = Big(res.data.OEE).toFixed(2)
          }

          this.setZhxl1Day()
        }
      })
    },

    /**
     * 设备绩效，近1月的OEE
     */
    queryOee1Month(){
      let month = getMonthAgo(1)
      dpm_oee(month+'-01',formatDate(new Date())).then(res=>{
        console.log("接口：/api/dpm/oee","方法：queryOee1Month",res)
        if(constant.successCode===res.code){
          if(res.data.OEE){
            this.oee_1month = res.data.OEE
            this.oee_1month = Big(res.data.OEE).toFixed(2)
          }

          this.setZhxl1Month()
        }
      })
    },

    /**
     * 设备绩效，近1年的OEE
     */
    queryOee1Year(){
      let month = getMonthAgo(11)
      dpm_oee(month+'-01',formatDate(new Date())).then(res=>{
        console.log("接口：/api/dpm/oee","方法：queryOee1Year",res)
        if(constant.successCode===res.code){
          if(res.data.OEE){
            this.oee_1year = res.data.OEE
            this.oee_1year = Big(res.data.OEE).toFixed(2)
            this.xnLYL = res.data.PE*100
            this.sbOEE = res.data.OEE*100
            this.sbKDL = res.data.AE*100
            this.sjLYL = res.data.AE*100
            this.sbGZTJL = res.data.FSR*100

            this.runTime = res.data.runSeconds/60/60/24
            this.stopTime = res.data.faultStopSeconds/60/60

            if(getDecimalPlaces(this.runTime)>0){
              this.runTime = Big(this.runTime).toFixed(0)
            }

            if(getDecimalPlaces(this.stopTime)>2){
              this.stopTime = Big(this.stopTime).toFixed(2)
            }

            if(getDecimalPlaces(this.xnLYL)>2){
              this.xnLYL = Big(this.xnLYL).toFixed(2)
            }

            if(getDecimalPlaces(this.sbOEE)>2){
              this.sbOEE = Big(this.sbOEE).toFixed(2)
            }

            if(getDecimalPlaces(this.sbKDL)>2){
              this.sbKDL = Big(this.sbKDL).toFixed(2)
            }

            if(getDecimalPlaces(this.sjLYL)>2){
              this.sjLYL = Big(this.sjLYL).toFixed(2)
            }

            if(getDecimalPlaces(this.sbGZTJL)>2){
              this.sbGZTJL = Big(this.sbGZTJL).toFixed(2)
            }

          }
          this.setZhxl1Year()
          this.setGztjlChar()
        }
      })
    },

    /**
     * 查询OEE趋势
     */
    queryOeeTrend(){
      let m = getMonthAgo(11)
      dpm_oee_trend(m+"-01",formatDate(new Date())).then(res=>{
        console.log("接口：/api/dpm/oee/trend","方法：queryOeeTrend",res)
        if(constant.successCode===res.code){
          let source = res.data.source
          let xAxisData=[],oeeData=[],teepData=[]
          for(const item of source){
            xAxisData.push(item[0])
            oeeData.push(Big(item[5]).toFixed(2))
            teepData.push(Big(item[6]).toFixed(2))
          }
          this.setSbZhxlChar(xAxisData,oeeData,teepData)
        }
      })
    },

    //查询MTBF,MTTR
    querydpmMtbf(){
      let m = getMonthAgo(11)
      dpm_mtbf(m+"-01",formatDate(new Date())).then(res=>{
        console.log("接口：/api/dpm/mtbf","方法：querydpmMtbf",res)
        if(constant.successCode===res.code){
          this.MTBF = res.data.MTBF
          this.MTTR = res.data.MTTR
          this.setMttrChar()
          this.setMtbfChar()
        }
      })
    },

    durationGroupByMonth(){
      let m = getMonthAgo(11)
      duration_groupByMonth(m+"-01",formatDate(new Date())).then(res=>{
        console.log("接口：/api/MachineShutdownEvent/duration/groupByMonth","方法：durationGroupByMonth",res)
        let xAxisData=[]
        let gzIndex = -1
        let jxIndex = -1
        let gzData=[]
        let jxData=[]
        let reasons = res.data.reasons
        let source = res.data.dataset.source
        if(constant.successCode===res.code){
          for(let i=0;i<reasons.length;i++){
            if(reasons[i]==='故障'){
              gzIndex = i
            }
            if(reasons[i]==='检修'){
              jxIndex = i
            }
          }
          if(gzIndex===-1 ||  jxIndex===-1){
            return false
          }

          for(const item of source){
            xAxisData.push(item[0])
            gzData.push(item[gzIndex+1])
            jxData.push(item[jxIndex+1])
          }

          this.setGztjsjChar(xAxisData,gzData)
          this.setJxtjsjChar(xAxisData,jxData)
        }
    })
    },

    //设备利用率,近12个月
    setSblylChar(xAxisData,sjlyl,xnlyl,fhsjlyl){
      let option = {

        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['时间利用率', '性能利用率',],
          textStyle: { color: '#ffffff' }
        },
        grid: {
          top:'14%',
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
          axisLine: { lineStyle: { color: '#ffffff' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#ffffff', width: 1, type: 'dashed' } },
          splitLine: {
            lineStyle: {
              color: '#318BAB', // 设置线的颜色为蓝色
              width: 2,         // 设置线的宽度
              type: 'dashed'     // 设置线的类型为实线
            }
          }
        },
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,        // 初始显示的部分（0% 到 50%）
          bottom:0
        },],
        series: [
          // {
          //   name: '负荷时间率',
          //   type: 'line',
          //   data: fhsjlyl
          // },
          {
            name: '时间利用率',
            type: 'line',
            data: sjlyl
          },
          {
            name: '性能利用率',
            type: 'line',
            data: xnlyl
          },

        ]
      };
      this.sblylChar.setOption(option)
    },

    //设备综合效率近1日
    setZhxl1Day(){
      const value = this.oee_1day;
      const text = this.oee_1day*100
      let option = {
        // backgroundColor: '#0F224C', //背景色
        series: [
          {

            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            backgroundStyle: {
              color: 'transparent',
            },
            data: [value, value],
            amplitude: 10, //水波振幅
            label: {
              //标签设置
              position: ['50%', '45%'],
              formatter: text+'%', //显示文本,
              textStyle: {
                fontSize: '22px', //文本字号,
                color: '#fff',
              },
            },
            outline: {
              borderDistance: 3,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#007DFF',
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: 'rgba(31, 222, 225, 1)',
                },
                {
                  offset: 0.85,
                  color: '#007DFF80',
                },
                {
                  offset: 0.35,
                  color: '#004a99',
                },
                {
                  offset: 0,
                  color: 'rgba(31, 222, 225, 1)',
                },
              ]),
            },
          },
        ],
      };


      this.zhxl1Day.setOption(option)
    },

    setZhxl1Month(){
      const value = this.oee_1month;
      const text = this.oee_1month*100
      let option = {
        // backgroundColor: '#0F224C', //背景色
        series: [
          {
            name: '预估量',
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            backgroundStyle: {
              color: 'transparent',
            },
            data: [value, value],
            amplitude: 10, //水波振幅
            label: {
              //标签设置
              position: ['50%', '45%'],
              formatter: text+'%', //显示文本,
              textStyle: {
                fontSize: '22px', //文本字号,
                color: '#fff',
              },
            },
            outline: {
              borderDistance: 3,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#007DFF',
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: 'rgba(31, 222, 225, 1)',
                },
                {
                  offset: 0.85,
                  color: '#007DFF80',
                },
                {
                  offset: 0.35,
                  color: '#004a99',
                },
                {
                  offset: 0,
                  color: 'rgba(31, 222, 225, 1)',
                },
              ]),
            },
          },
        ],
      };


      this.zhxl1Month.setOption(option)
    },

    setZhxl1Year(){
      const value = this.oee_1year
      const text = this.oee_1year*100
      let option = {

        series: [
          {

            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            backgroundStyle: {
              color: 'transparent',
            },
            data: [value, value],
            amplitude: 10, //水波振幅
            label: {
              //标签设置
              position: ['50%', '45%'],
              formatter: text+'%', //显示文本,
              textStyle: {
                fontSize: '22px', //文本字号,
                color: '#fff',
              },
            },
            outline: {
              borderDistance: 3,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#007DFF',
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: 'rgba(31, 222, 225, 1)',
                },
                {
                  offset: 0.85,
                  color: '#007DFF80',
                },
                {
                  offset: 0.35,
                  color: '#004a99',
                },
                {
                  offset: 0,
                  color: 'rgba(31, 222, 225, 1)',
                },
              ]),
            },
          },
        ],
      };


      this.zhxl1Year.setOption(option)
    },

    //近一年设备性能指标
    setSbZhxlChar (xAxisData,oeeData,teepData) {
      let option = {
        grid:{
          top:'12%',
          bottom:'12%'
        },
        legend: {
          data: ['OEE'],
          textStyle: { color: '#ffffff' }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }
          }
        },

        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: { lineStyle: { color: '#ffffff' } }

          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            },
            axisLine: { lineStyle: { color: '#ffffff', width: 1, type: 'dashed' } },
            splitLine: {
              lineStyle: {
                color: '#318BAB', // 设置线的颜色为蓝色
                width: 2,         // 设置线的宽度
                type: 'dashed'     // 设置线的类型为实线
              }
            }
          }

        ],
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,        // 初始显示的部分（0% 到 50%）
          bottom:0
        },],
        series: [
          {
            name: 'OEE',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %'
              }
            },
            data: oeeData
          },
          // {
          //   name: 'TEEP',
          //   type: 'bar',
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + ' %'
          //     }
          //   },
          //   data: teepData
          // }

        ]
      }
      this.sbzhxlChar.setOption(option)
    },

    //平均修复时间
    setMttrChar(){
      const value = this.MTTR;
      const text = this.MTTR
      let option = {
        // backgroundColor: '#0F224C', //背景色
        series: [
          {

            type: 'liquidFill',
            radius: '100%',
            center: ['50%', '50%'],
            backgroundStyle: {
              color: 'transparent',
            },
            data: [100, 100],
            amplitude: 10, //水波振幅
            label: {
              //标签设置
              position: ['50%', '50%'],
              formatter: text+'小时', //显示文本,
              textStyle: {
                fontSize: '22px', //文本字号,
                color: '#fff',
              },
            },
            outline: {
              borderDistance: 3,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#007DFF',
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: 'rgba(31, 222, 225, 1)',
                },
                {
                  offset: 0.85,
                  color: '#007DFF80',
                },
                {
                  offset: 0.35,
                  color: '#004a99',
                },
                {
                  offset: 0,
                  color: 'rgba(84, 112, 198, 1)',
                },
              ]),
            },
          },
        ],
      };
      this.mttrChar.setOption(option)
    },

    //平均故障间隔
    setMtbfChar(){
      const value = this.MTBF;
      const text = this.MTBF
      let option = {
        // backgroundColor: '#0F224C', //背景色
        series: [
          {

            type: 'liquidFill',
            radius: '100%',
            center: ['50%', '50%'],
            backgroundStyle: {
              color: 'transparent',
            },
            data: [100, 100],
            amplitude: 10, //水波振幅
            label: {
              //标签设置
              position: ['50%', '50%'],
              formatter: text+'天', //显示文本,
              textStyle: {
                fontSize: '22px', //文本字号,
                color: '#fff',
              },
            },
            outline: {
              borderDistance: 3,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#007DFF',
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: 'rgba(31, 222, 225, 1)',
                },
                {
                  offset: 0.85,
                  color: '#007DFF80',
                },
                {
                  offset: 0.35,
                  color: '#004a99',
                },
                {
                  offset: 0,
                  color: 'rgba(145, 204, 117, 1)',
                },
              ]),
            },
          },
        ],
      };
      this.mtbfChar.setOption(option)
    },

    //故障停机率
    setGztjlChar(){
      const value = this.sbGZTJL;
      const text = this.sbGZTJL
      let option = {
        // backgroundColor: '#0F224C', //背景色
        series: [
          {

            type: 'liquidFill',
            radius: '100%',
            center: ['50%', '50%'],
            backgroundStyle: {
              color: 'transparent',
            },
            data: [100, 100],
            amplitude: 10, //水波振幅
            label: {
              //标签设置
              position: ['50%', '50%'],
              formatter: text+'%', //显示文本,
              textStyle: {
                fontSize: '22px', //文本字号,
                color: '#fff',
              },
            },
            outline: {
              borderDistance: 3,
              itemStyle: {
                borderWidth: 2,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#007DFF',
                    },
                    {
                      offset: 0.6,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(45, 67, 114, 1)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: 'rgba(31, 222, 225, 1)',
                },
                {
                  offset: 0.85,
                  color: '#007DFF80',
                },
                {
                  offset: 0.35,
                  color: '#004a99',
                },
                {
                  offset: 0,
                  color: 'rgba(117,42,238, 1)',
                },
              ]),
            },
          },
        ],
      };
      this.gztjlChar.setOption(option)
    },

    //月故障停机时间
    setGztjsjChar (xAxisData,gzData) {
      let option = {
        grid: {
          bottom: '12%',
          top:'10px',
          left:'18%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisPointer: { type: 'shadow' },
          axisLine: { lineStyle: { color: '#ffffff' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#ffffff' } },
          splitLine: {
            lineStyle: {
              color: '#318BAB', // 设置线的颜色为蓝色
              width: 2,         // 设置线的宽度
              type: 'dashed'     // 设置线的类型为实线
            }
          }
        },
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,
          bottom:0
        },],
        series: [
          {
            itemStyle: { color: '#752AEE' },
            data: gzData,
            type: 'line'
          }
        ]
      }
      this.gztjsjChar.setOption(option)
    },

    //月故障停机时间
    setJxtjsjChar (xAxisData,jxData) {
      let option = {
        grid: {
          bottom: '12%',
          top:'10px',
          left:'18%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisPointer: { type: 'shadow' },
          axisLine: { lineStyle: { color: '#ffffff' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#ffffff' } },
          splitLine: {
            lineStyle: {
              color: '#318BAB', // 设置线的颜色为蓝色
              width: 2,         // 设置线的宽度
              type: 'dashed'     // 设置线的类型为实线
            }
          }
        },
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,
          bottom:0
        },],
        series: [
          {
            data: jxData,
            type: 'line'
          }
        ]
      }
      this.jxtjsjChar.setOption(option)
    },



















    goHome(){
      this.$router.push('/home')
      // window.location.href = constant.homeUrl
    }


  }

}
</script>

<style lang="less" scoped>

body {
  font-family: 'myriad-pro', 'Arial' !important;
  margin: 0;
  padding: 0;
}

.w-100 {
  width: 100%;
}

.flex {
  display: flex;
}

.flex-0 {
  flex: 0 0 auto;
}

.flex_c_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  margin: auto;
  max-width: 68.750vw;
}

ul, li, p {
  margin: 0;
  padding: 0;
  list-style: none;
}


.header {
  position: relative;
  box-sizing: content-box;
  height: 6.875vw;

  > img {
    width: 100%;
  }

  .box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;

    .title {
      font-size: 2.188vw;
      font-weight: bold;
      text-align: center;
      margin-top: 2.240vw;
      text-shadow: 0 0.208vw 0.208vw rgba(0, 0, 0, 0.25);
      background: linear-gradient(180deg, #FFFFFF 0%, #83C3EF 83%, #0184DE 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

  }
}


.bg {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-size: 0.729vw;
  line-height: 1;
  background-image: url('../img/bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  color: #fff;

}


.dp_con {
  position: relative;
  //background-image: url("../img/line2.svg");
  background-size: 97.6%;
  height: calc(100vh - 6.354vw);
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 0 0.833vw;
  display: flex;
  margin-top: -2.083vw;


  .left {
    width: 26.302vw;
    flex: 0 0 auto;
  }

  .right {
    width: 26.302vw;
    flex: 0 0 auto;
  }

  .center {
    width: 100%;
    padding: 0 0.833vw;
  }
}

.card {
  margin-bottom: 0.625vw;
  text-align: left;
  background: rgba(10, 63, 152, 0.2);
  position: relative;
  padding: 0.417vw;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    background-size: 100%;
    background-position: bottom;
    padding-bottom: 0.521vw;
    font-size: 0.938vw;
    font-weight: bold;
    margin-bottom: 0.313vw;
    background-repeat: no-repeat;
    text-shadow: 0 0 0.521vw #00b6ff;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 3.385vw;
      height: 0.156vw;
      background: #0086FF;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 3.646vw;
      right: 2.604vw;
      height: 0.156vw;
      background: #083566;
    }

    .icon1 {
      margin-right: 0.625vw;
      width: 0.781vw;
    }

    .icon2 {
      position: absolute;
      width: 2.500vw;
      bottom: 0;
      right: 0;
    }
  }

  .body {
    position: relative;
    padding: 0.417vw;
    box-sizing: border-box;
    height: calc(100% - 2.396vw);

    > .img {
      position: absolute;
      width: 0.521vw;

      &.t1 {
        left: 0;
        top: 0;
      }

      &.t2 {
        right: 0;
        top: 0;
        transform: rotate(90deg);
      }

      &.t3 {
        left: 0;
        bottom: 0;
        transform: rotate(270deg);
      }

      &.t4 {
        right: 0;
        bottom: 0;
        transform: rotate(180deg);
      }
    }

  }
}

.height_50 {
  height: calc(50% - 0.625vw)
}

.height_3 {
  height: calc(33.33% - 0.625vw)
}

.height_6 {
  height: calc(66.66% - 0.625vw)
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 0.313vw; /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, 0); /* 轨道背景色 */
  border-radius: 0.313vw;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #9dbfd2; /* 滑块背景色 */
  border-radius: 0.313vw;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停时的背景色 */
}


.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  img {
    display: block;
    margin: auto;
    width: 70.729vw;
  }
}

.sckg {
  display: flex;
  justify-content: space-between;

  .item {
    width: 4.688vw;
    text-align: center;

    img {
      width: 100%;
      display: block;
    }

    .text1 {
      position: relative;
      top: -2.604vw;
      font-weight: bold;
      font-size: 1.458vw;
      color: #FFFFFF;
      line-height: 1;
      background: linear-gradient(180deg, #FFFFFF 0%, #55D0FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-top: -0.781vw;
    }

    .text2 {
      font-size: 0.625vw;
    }
  }
}

.sckg_tb {
  height: calc(100% - 6.458vw);
  margin-top: 0.625vw;
}

.sbxj {
  display: flex;
  justify-content: space-between;

  .item {
    flex: 1;
    text-align: center;

    img {
      width: 3.646vw;
    }

    .text1 {
      font-size: 0.573vw;
      margin: 0.521vw 0;
    }

    .text2 {
      font-size: 1.042vw;

      small {
        font-size: 0.677vw;
      }
    }
  }
}

.sbxj_tb {
  height: calc(100% - 7.813vw);
  margin-top: 0.625vw;
}


.znaf_tb {
  display: flex;
  height: 100%;
}

.ydtj {
  display: flex;

  .icon1 {
    width: 5.729vw;
    margin: 1.042vw 1.302vw 0 0.625vw;
  }

  .item {
    position: relative;
    font-size: 0.729vw;
    margin-bottom: 0.625vw;

    img {
      width: 100%;
      display: block;
    }

    .text1 {
    }

    .text2 {
      font-size: 1.250vw;
      font-weight: bold;
      position: relative;
      top: -0.052vw;
    }

    .text3 {
      margin-left: 0.625vw;
    }

    .info {
      position: absolute;
      left: 1.354vw;
      right: 0.729vw;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
    }
  }
}

.ydtj_tb {
  height: calc(100% - 8.125vw);
}

.sbjx {
  display: flex;
  justify-content: space-around;

  .item {
    text-align: center;
    flex: 1;

    div {
      height: 5.208vw;
    }

    p {
      margin-top: 0.625vw;
    }
    &.v2{
      div{
        height: 6.771vw
      }
    }
  }
}


.sbjx_tb {
  height: calc(100% - 7.292vw);
  margin-top: 0.625vw;

}

.zw {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.sblyl {
  height: 100%;
}


.sbxj_tb {
  height: calc(100% - 8.594vw);
  margin-top: 0.625vw;
}


.xnzb_c {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  .r1 {
    width: 21.354vw;

    .item {
      margin: 2.083vw 0;
    }

    .line {
      height: 0.156vw;
      background: rgba(255, 255, 255, 0.28);
      display: flex;
      justify-content: space-between;
      align-items: center;

      &::before, &::after {
        content: "";
        width: 1.146vw;
        height: 0.156vw;
        background: #FED9A6;
        box-shadow: 0 0 0.313vw 0 #FED9A6;
      }
    }

    .box {
      margin: 0.417vw 0;
      background: #003E59;
      border: 0.052vw solid #00F9FF;
      height: 4.167vw;
      display: flex;
      align-items: center;
      padding: 0 1.250vw 0 0;
      box-sizing: border-box;

      img {
        width: 4.167vw;
        height: 4.167vw;
        margin-right: 0.625vw;
      }

      .text1 {
        font-size: 0.885vw;
      }

      .text2 {
        font-size: 0.729vw;
        margin-top: 0.625vw;
      }

      .text3 {
        font-size: 1.667vw;
        color: #12E4F5;
        font-weight: bold;
      }

      &.v2 {
        background: #0B2248;
        border: 0.052vw solid #2F6EDD;

        .text3 {
          color: #2F6EDD;
        }
      }
    }
  }

  .r2 {
    position: relative;

    .bg2 {
      width: 26.823vw;
      display: block;
      padding: 2.083vw 2.083vw 0 2.083vw;
      box-sizing: border-box;
    }

    .item {
      text-align: center;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;

      .text1 {
        width: 3.333vw;
        height: 3.333vw;
        text-align: center;
        line-height: 3.333vw;
        background-image: url("../img/icon7.svg");
        border-radius: 100%;
        margin: auto;
        font-size: 1.042vw;
      }

      .text2 {
        margin-top: 0.417vw;
      }

      &:nth-child(1) {
        top: 35%;
      }

      &:nth-child(2) {
        top: 0;
        left: 13%;
      }

      &:nth-child(3) {
        top: 0;
        left: 75%;
      }

      &:nth-child(4) {
        top: 38%;
        left: 87%;
      }
    }
  }
}


.scgl-title {
  text-align: center;
  margin-bottom: 0.625vw;
}

.scgl_t1 {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 50%;
    height: 50%;
    padding: 0.625vw 0;
    box-sizing: border-box;
    display: flex;

    .flex-0 {
      height: 100%;
      width: 50%;
    }

    .flex_c_c {
      justify-content: flex-start;
      padding-left: 0.625vw;
    }
  }
}

.scgl_t2 {
  .tb {
    height: calc(100% - 2.292vw);
  }
}


.c_img {
  position: absolute;
  width: 50%;
  left: 25%;
  top: 10%;

  img {
    width: 100%;
  }
}


.scgl_t3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  .item {
    width: 16.667vw;
    height: 4.635vw;
    background-image: url("../img/p5.svg");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.042vw;

    .text1 {
      margin-right: 1.042vw;
    }

    .text2 {
      font-size: 2.188vw;
      font-weight: bold;
      color: #0BF9FE;

      small {
        font-size: 0.833vw;
        font-weight: 500;
        color: #fff;
      }
    }

    &.v2 {
      background-image: url("../img/p6.svg");

      .text2 {
        color: #07E96C;
      }
    }
  }
}


.sjtj {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 1;

  .item {
    width: 7.083vw;
    text-align: center;

    .text1 {
      font-size: 1.406vw;
      color: #FFFFFF;
      letter-spacing: 0.052vw;
      font-style: normal;
      text-transform: none;
    }

    .text2 {
      color: rgba(255, 255, 255, 0.7);
      width: 7.083vw;
      line-height: 1.458vw;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #4E3B01 49%, rgba(0, 0, 0, 0) 100%);
      position: relative;
      margin-top: 0.625vw;

      &::after, &::before {
        content: "";
        width: 100%;
        height: 0.052vw;
        background: linear-gradient(90deg, rgba(87, 69, 0, 0) 0%, #FFCB00 49%, rgba(126, 101, 0, 0) 100%);
        position: absolute;
        top: 0;
        left: 0;
      }

      &::before {
        bottom: 0;
        top: auto;
      }
    }

    img {
      width: 5.417vw;
      margin-top: -1.042vw;
    }

    &.v2 {
      margin-top: 3.646vw;

      img {
        width: 6.458vw;
      }

      .text2 {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.02) 0%, #01434E 49%, rgba(0, 0, 0, 0) 100%);

        &::after, &::before {
          background: linear-gradient(90deg, rgba(0, 46, 87, 0) 0%, #00C2FF 49%, rgba(0, 104, 126, 0) 100%);
        }
      }
    }
  }
}

.sjtj-bg {
  width: 100%;
  margin-top: -100%;
  position: relative;
  top: -3.490vw;
}


.zhaf_t1 {
  padding: 2.083vw 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;

  .r1 {
    height: 50%;
    position: relative;

    img {
      height: 100%;
      display: block;
    }

    .box {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 1.250vw;

      img {
        width: 100%;
        height: 100%;

      }
    }
  }

  .r2 {
    height: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    img {
      height: 90%;
      display: block;
    }
  }
}

.zhaf_t2 {
  overflow: auto;
  height: 100%;

  ul {

    li {
      display: flex;
      margin-bottom: 0.625vw;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0.781vw;
        height: 100%;
        background: #ff0000;
        top: 1.042vw;
        width: 0.052vw;
      }

      &:nth-last-child(1) {
        &::before {
          content: "";
          position: absolute;
          left: 0.781vw;
          height: 0;
          background: #ff0000;
          top: 1.042vw;
          width: 0.052vw;
        }
      }

      .icon1 {
        width: 1.510vw;
        margin-right: 0.625vw;
      }

      .info {
        position: relative;

        .box {
          position: absolute;
          z-index: 2;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          padding: 1.250vw;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .btn_box {
            position: absolute;
            right: 1.250vw;
            bottom: 1.250vw;

            button {
              width: 5.521vw;
              height: 1.667vw;
              background: #2F51FF;
              border-radius: 0.208vw 0.208vw 0.208vw 0.208vw;
              display: flex;
              align-items: center;
              justify-content: center;
              border: none;
              color: #fff;
              margin-top: 0.625vw;
              cursor: pointer;

              &:hover {
                background: #4a68ff;
              }
            }
          }
        }
      }
    }
  }
}

.zhaf_t3{
  width: 29.688vw !important;
}

.dp_con {
  position: relative;
  z-index: 9;

  .left.v2 {
    width: 55%;
    padding-right: 0.417vw;
  }

  .right.v2 {
    width: 45%;
    padding-left: 0.417vw;
  }
}

.ydtj_t1 {
  height: 100%;
  display: block;
  width: 100%;
  object-fit: cover;
  padding-bottom: 0.625vw;
  box-sizing: border-box;
}

.ydtj_t2{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item{
    background-image: url("../img/bg6.svg");
    width: 13.333vw;
    height: 5.156vw;
    background-size: cover;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    p{
      padding-left: 4.167vw;
      width: 100%;
      box-sizing: border-box;
    }
    .text1{
      font-weight: bold;
      font-size: 1.354vw;
      letter-spacing: 0.104vw;
      background: linear-gradient(180deg, #FFFFFF 0%, #20F14E 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 0.417vw;
    }
    &:nth-child(1),&:nth-child(2),&:nth-child(3){
      margin-bottom: 1.042vw;
      background-image: url("../img/bg5.svg");
      .text1{
        background: linear-gradient(180deg, #FFFFFF 0%, #0BF9FE 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }
  }
}

.p-8{
  margin: 0 -0.417vw;
  .w-100{
    padding: 0 0.417vw;
    box-sizing: border-box;
  }
}

.scgl_t4{
  height: calc(60% - 0.625vw);margin-bottom: 0.625vw;padding-top: 2.604vw;box-sizing: border-box
}
.zhaf_h{
  height: calc(50% - 8.646vw - 0.625vw)
}
.ydtj_h{
  height: calc(50% - 8.333vw)
}


</style>



